@function rem($px) {
  @return $px / 100 + rem;
}
$main-color: #7f2974;
$c99: #999999;
$c66: #666666;
$cff: #ffffff;
.fr {
  float: right;
}
.fl {
  float: left;
}
html{
  font-size: 83px;
}
body {
  padding-top: rem(150);
}
img {
  max-width: 100%;
}
.top-box {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: $cff;
  .top-tips-nav {
    max-width: rem(1366);
    padding: 0 rem(160);
    line-height: rem(38);
    width: rem(1366);
    box-sizing: border-box;
    margin: 0 auto;
    .hello-text {
      color: $main-color;
      font-size: rem(14);
      font-weight: 500;
      letter-spacing: rem(1.2);
    }
    .tip-nav {
      background-color: #fff;
      padding: 0;
      .layui-nav-bar {
        background-color: transparent;
      }
      .layui-nav-item {
        line-height: inherit;
        a {
          color: $c99;
          font-size: inherit;
          font-size: inherit;
          padding: 0;
          margin-right: rem(33);
        }
        &.end-item a {
          margin-right: 0;
        }
      }
    }
  }
  .top-line {
    height: rem(2);
    background-color: $main-color;
    margin: 0;
    padding: 0;
  }
  .top-icon-box {
    width: rem(1366);
    font-size: 0;
    max-width: rem(1366);
    margin: 0 auto;
    padding: rem(10) 0 0 rem(169);
    box-sizing: border-box;
    .box-style {
      display: inline-block;
      color: $c66;
      font-size: 0;
      ul {
        display: inline-block;
        vertical-align: middle;
        li {
          font-family: PingFangSC-Regular;
          font-size: rem(14);
        }
      }
    }
    .tel-info-box {
      img {
        display: inline-block;
        width: rem(45);
        height: rem(32);
        margin-right: rem(10);
        vertical-align: middle;
      }
    }
  }
  .logo {
    width: rem(50);
    height: rem(50);
    display: inline-block;
    margin-left: rem(238);
    margin-right: rem(304);
  }
  .local-info-box {
    img {
      width: rem(34);
      height: rem(40);
      margin-right: rem(10);
    }
  }
  .nav-box {
    max-width: rem(1366);
    margin: 0 auto;
    color: #303030;
    background-color: $cff;
    padding: 0 rem(170);
    .layui-nav-bar {
      background-color: transparent;
    }
    .layui-nav-item {
      line-height: rem(50);
      &.active a {
        color: $main-color;
      }
      a {
        color: initial;
        font-size: rem(18);
        padding: 0;
        margin-right: rem(93);
      }
      &.end-item a {
        margin-right: 0;
      }
    }
  }
}
.container {
  max-width: rem(1366);
  margin: 0 auto;
}
.us-banner-box{
  height: rem(200);
  position: relative;
  color: $cff;
  text-align: center;
  background: url('../images/us-banner.jpg') center no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  span{
    font-size: rem(20)
  }
  p{
    font-size: rem(36)
  }
}
.us-container{
  max-width: rem(1366);
  margin: 0 auto;
  padding: 0 rem(160);
  box-sizing: border-box;
}
.us-info-title{
  line-height: rem(98);
  font-size: rem(30);
  color: #111111;
  border-bottom:rem(4) solid $main-color;
}
.us-edit-content{
  padding: rem(30) 0 0;
  font-size: rem(24);
  line-height: rem(40);
  .focus-text{
    color: $main-color;
  }
  .full-img{
    height: rem(458);
    margin-bottom: rem(30);
    width: 100%;
    object-fit: cover;
  }
  img.us-edit-img.layui-inline{
    width: 100%;
    object-fit: cover;
    height: rem(260);
  }
}
// 地址信息
.address-box{
  font-size: 0;
  text-align: center;
  margin-top: rem(60);
  padding: rem(60) 0;
  background-color: #f6f7f8;
  .address-img{
    display: inline-block;
    width: rem(692);
    height:rem(424);
    margin-right: rem(20);
    background: url('../images/address-map.png') 0 0 no-repeat;
    background-size: contain;
  }
  .company-info-box{
    display: inline-block;
    vertical-align: top;
    p.info-title{
      width: rem(302);
      text-align: left;
      font-weight: 600;
      padding-right: rem(7);
      line-height: rem(87);
      font-size: rem(23);
      color: $main-color;
      border-bottom:rem(4) solid $main-color;
      margin-bottom: rem(30);
    }
    ul li{
      font-size: 0;
      text-align: left;
      margin-bottom: rem(28);
      &:last-child{
        margin-bottom: 0;
      }
      i{
        display: inline-block;
        vertical-align: middle;
        background-size: 100%;
        width: rem(44);
        margin-right: rem(11);
        &.icon-tel{
          height: rem(30);
          background: url('../images/address-tel.png') center no-repeat;
        }
        &.icon-loc{
          background: url('../images/address-loc.png') center no-repeat;
          height:rem(40);
        }
        &.icon-phone{
          background: url('../images/address-phone.png') center no-repeat;
          height:rem(40);
        }
        &.icon-email{
          background: url('../images/address-email.png') center no-repeat;
          height:rem(31);
        }
        &.icon-www{
          background: url('../images/address-icon.png') center no-repeat;
          height:rem(34);
        }
      }
      p{
        font-size: rem(20);
        color: #666;
        display: inline-block;
        vertical-align: middle
      }
    }
  }
}
// footer
footer {
  padding-top: rem(60);
  text-align: center;
  padding-bottom: rem(60);
  .bottom-title {
    margin: 0 auto;
    display: block;
    width: rem(357);
    height: rem(198);
    object-fit: contain;
  }
  p {
    margin: rem(50) auto rem(10);
  }
  p,
  .bottom-nav span a {
    color: #aaa;
  }
  .layui-breadcrumb a:hover {
    color: $main-color !important;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1385px) {
  .top-box .nav-box .layui-nav-item a {
    margin-right: 0.88rem;
  }
}
